<template>
  <div class="IP-metadata">
    <Loading v-if="state.isLoading" />
    <div class="search">
      <div class="box">
        <el-config-provider :locale="zhCn">
          <el-date-picker
            type="datetimerange"
            v-model="state.dateRange"
            value-format="YYYY-MM-DDTHH:mm:ssZ"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>        
        </el-config-provider>
        <el-input placeholder="请输入" clearable v-model="state.input" class="input-with-select">
          <template #prepend>
            <el-select clearable v-model="state.select" placeholder="请选择">
              <el-option v-for="item of state.searchFields" :label="item.label" :key="item.value" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-input>
      </div>
      <el-button class="search-btn" type="primary" :icon="Search" @click="getprotocol_info">搜索</el-button>
      <el-button class="search-btn" @click="openSenior" type="primary" :icon="!state.isShowSenior ? ArrowDown : ArrowUp">高级搜索</el-button>
    </div>

    <div class="senior" v-if="state.isShowSenior">
      <AdvancedSearchs :searchFields="state.searchFields" />
    </div>

    <div class="container">
      <div class="l-p">
        <h2>数据分类</h2>
        <el-select v-model="state.typeValue" placeholder="请数据分类选择">
          <el-option
            v-for="item in state.typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input
          placeholder="请输入搜索内容"
          clearable
          v-model="state.value">
          <template #append>
            <el-button @click="searchProtocol" :icon="Search" />
          </template>
        </el-input>
        <div class="menu">
          <li
            v-for="(item, index) in state.protocol_info"
            :class="item.protocol === state.activeName ? 'iaActive' : ''"
            :key="index"
            @click="handleClick(item)">
            {{ item.protocol + '（' + (item.total !== undefined ? item.total : '') + '）' }}
          </li>
        </div>
      </div>
      <div class="r-p">
        <div class="t-p">
          <h2><span>{{state.activeName}}&nbsp;数据分布</span><el-button :icon="UploadFilled" type="primary">导出图片</el-button></h2>
          <div class="list">
            <div id="my-list"></div>
          </div>
        </div>
        <div class="b-p">
          <h2>
            <span>{{state.activeName}}</span>
            <div>
              <el-button :icon="UploadFilled" type="primary">导出数据</el-button>
              <el-button @click="openField('sort')" :icon="Sort" type="primary">字段排序</el-button>
            </div>
          </h2>

          <div @click="openField('edit')" class="el-icon-more">
            <el-icon >
              <MoreFilled />
            </el-icon>
          </div>
          <div class="t-c">
            <el-table
              height="100%"
              border
              class="my-table"
              :header-cell-style="elTableStyle.headerCellStyle"
              v-if="state.tableData && state.tableData.length"
              :data="state.tableData">
              <el-table-column
                v-for="(item, index) in state.tableTitle"
                :key="`col_${index}`"
                :label="item.alias"
                show-overflow-tooltip
                :width="state.colTableTitle[index].width"
                align="center">
                <template #default="scope">
                  <span
                    v-if="scope.row.last_layer"
                    @click="openJson(scope.row.last_layer[state.colTableTitle[index].ename], state.colTableTitle[index].type, state.colTableTitle[index].ename)"
                    :class="state.colTableTitle[index].type === 'json' ? 'preview' : ''">
                    {{ handleTableColData(state.colTableTitle[index], scope.row.last_layer, scope.row) }}
                  </span>
                  <span
                    :key="scope.row.last_layer[state.colTableTitle[index].ename]"
                    v-else>
                    -
                  </span>
                </template>
              </el-table-column>

              <el-table-column v-if="state.tableTitle.length && !state.isLoading && state.tableData.length" label="操作" fixed="right" min-width="188px" align="center">
                <template #default="scope">
                  <div class="operate-box">
                    <div class="operate" @click="openDetails(scope.row)">
                      <el-icon>
                        <View />
                      </el-icon>
                      <span>查看详情</span>
                    </div>
                    <span :class="scope.row.linkfile.data ? '' : 'no-file'" class="operate" @click="gotoFile(scope.row)"><i class="el-icon-tickets icon-style"></i>素材阅报</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-empty v-else description="暂无数据"></el-empty>
            <el-pagination
              v-if="state.tableData && state.tableData.length"
              background
              @current-change="handleCurrentChange"
              :current-page="state.currentPage"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="state.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <el-drawer
      title="详情"
      v-model="state.detailsVisible"
      direction="rtl"
      :before-close="handleClose"
      :size="800">
      <div v-if="state.detailsInfo.last_layer" class="details">
        <el-descriptions :column="1" border>
          <el-descriptions-item v-for="(noneItem, noneIndex) in state.cnnameList" :key="noneIndex">
            <template #label>
              {{noneItem.label}}
            </template>
            <div v-if="noneItem.type === 'Array'">
              <div
                v-if="getDetailArrData(state.detailsInfo.last_layer[noneIndex]) === 'real_array' &&
                state.detailsInfo.last_layer[noneIndex].length < 500">
                <p
                  v-for="(item, index) of state.detailsInfo.last_layer[noneIndex]"
                  :class="index !== state.detailsInfo.last_layer[noneIndex].length - 1 ? 'details-item' : ''"
                  :key="index">
                  {{item}}<span v-if="index !== state.detailsInfo.last_layer[noneIndex].length - 1">,</span>
                </p>
              </div>
              <div
                v-else-if="getDetailArrData(state.detailsInfo.last_layer[noneIndex]) === 'real_array' &&
                state.detailsInfo.last_layer[noneIndex].length >= 500">
                <MyVueScroll :dataInfo="getScrollInfo(state.detailsInfo.last_layer[noneIndex])" />
              </div>
              <div v-else-if="getDetailArrData(state.detailsInfo.last_layer[noneIndex]) === 'string'">
                {{ state.detailsInfo.last_layer[noneIndex] }}
              </div>
              <div v-else>-</div>
            </div>
            <div class="preview" v-else-if="noneItem.type === 'json'" @click="openJson(state.detailsInfo.last_layer[noneIndex], 'json', noneIndex)">预览</div>
            <span v-else>
              <!-- {{
                detailsInfo.last_layer[noneIndex] || detailsInfo.last_layer[noneIndex] === false || detailsInfo.last_layer[noneIndex] === 0 ?
                detailsInfo.last_layer[noneIndex] : '-'
              }} -->
              {{ getDetailsStringData(state.detailsInfo.last_layer, noneIndex, state.detailsInfo) }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item v-for="(citem, cindex) in state.commonList" :key="cindex">
            <template #label>
              {{citem}}
            </template>
            {{state.detailsInfo[cindex] || '-'}}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else class="details">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-drawer>

    <el-drawer
      title="字段排序"
      v-model="state.sortDialogVisible"
      direction="rtl"
      :before-close="handleClose"
      :size="700">
      <div class="wrapper-field">
        <div class="simple-page">
          <Container @drop="onDrop">
            <Draggable v-for="(item, index) in state.tableTitle" :key="index">
              <div class="draggable-item">
                <span>{{ item.alias }}</span>
              </div>
            </Draggable>
          </Container>
        </div>
      </div>
      <div class="dialog-footer">
        <el-button @click="state.sortDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitChange">确 定</el-button>
      </div>
    </el-drawer>

    <el-drawer
      title="字段编辑"
      v-model="state.dialogVisible"
      direction="rtl"
      :before-close="handleClose"
      :size="1274">
      <div class="wrapper-field">
        <el-checkbox-group v-model="state.checkList">
          <div v-for="(item, index) in state.fieldList" :key="item.ename" class="field">
            <el-checkbox :key="item.ename" :label="item.ename" @change="((val:any)=>{itemChange(val, index)})" :name="item.ename">{{ item.alias }}</el-checkbox>
            <el-input :key="index" @input="handleInput" @focus="handleFocus" v-model="item.alias" placeholder="请输入字段名称"></el-input>
          </div>
        </el-checkbox-group>
      </div>
      <div class="dialog-footer">
        <el-button @click="state.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitChange">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ArrowUp, ArrowDown, Search, UploadFilled, Sort, View, MoreFilled } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

import AdvancedSearchs from "../../../components/AdvancedSearchs/advanced-searchs.vue";
import elTableStyle from "../../../config/third-plugins/element/elTable";
import MyVueScroll from "../../../components/MyVueScroll/MyVueScroll.vue";

import { Container, Draggable } from 'vue3-smooth-dnd'

import Sortable from "sortablejs";

import * as echarts from 'echarts'

const listOption = ref()
const isDraw = ref(false)
const mychart = ref()

const unwarp = (obj:any) => obj && (obj.__v_raw || obj.valueOf() || obj);

const route = useRoute()

interface im {
  isLoading:boolean,
  dateRange:Array<string>,
  input:string,
  select:string,
  searchFields:Array<any>,
  isShowSenior:boolean,

  currentPage:number,
  total:number,
  tableData:Array<any>,
  tableTitle:Array<any>,
  colTableTitle:Array<any>,
  notSortList:Array<any>,

  typeValue: string,
  typeOptions:Array<any>,

  value:string,
  protocol_info:Array<any>,
  activeName:string,

  listOption:any,

  isDrag:boolean,
  sortDialogVisible:boolean,

  fieldList:Array<any>,
  checkList:Array<any>,

  dialogVisible: boolean,
  editTemp:any,

  detailsVisible: boolean,
  detailsInfo: any,
  cnnameList:any,
  commonList:any
}

const state = reactive<im>({
  isLoading:false,
  dateRange:[],
  input:'',
  select:'',
  searchFields:[
    {
      label: '数据来源',
      value: 'source'
    },
    {
      label: '源地址',
      value: 'srcip'
    },
    {
      label: '目标地址',
      value: 'dstip'
    }
  ],
  isShowSenior:false,

  currentPage: 1,
  total: 0,
  tableData: [],
  tableTitle: [],
  colTableTitle: [],
  notSortList: [],

  typeValue: '3',
  typeOptions: [
    // {
    //   label: '按数据源分类',
    //   value: '1'
    // },
    // {
    //   label: `按设控${this.$tm('md')}分类`,
    //   value: '2'
    // },
    {
      label: '按协议分类',
      value: '3'
    }
  ],

  value: '',
  protocol_info: [],
  activeName: '',

  listOption: {},

  isDrag: false,
  sortDialogVisible: false,

  fieldList: [],
  checkList: [],

  dialogVisible: false,
  editTemp: {},

  detailsVisible: false,
  detailsInfo: {},
  cnnameList: {},
  commonList: {}
})

const searchProtocol = () => {}

// 提交
const commitChange = () => {
  const temp = state.protocol_info.find((i:any) => {
    return state.activeName === i.protocol
  })

  const info = [...state.tableTitle, ...state.notSortList]

  state.isLoading = true
  $ajax.put(`/api/uischemas/${temp.id}`, {
    data: {
      fileds: info
    }
  }, true).then(res => {
    state.isLoading = false
    ElMessage({
      type: 'success',
      message: '编辑成功'
    })
    state.dialogVisible = false
    state.sortDialogVisible = false
    getAllProtocol(false)
  }).catch(() => {
    state.isLoading = false
    ElMessage({
      type: 'error',
      message: '编辑失败'
    })
  })
}

const itemChange = (checked:any, index:any) => {
  if (checked) {
    const temp = state.fieldList[index]
    const tIndex = state.notSortList.findIndex((i:any) => {
      return i.ename === temp.ename
    })
    if (tIndex !== -1) state.notSortList.splice(tIndex, 1)
    state.tableTitle.push({
      ...temp,
      isshow: 1
    })
  } else {
    const temp = state.fieldList[index]
    const tIndex = state.tableTitle.findIndex(i => {
      return i.ename === temp.ename
    })
    if (tIndex !== -1) state.tableTitle.splice(tIndex, 1)
    state.notSortList.push({
      ...temp,
      isshow: 0
    })
  }
  state.colTableTitle = JSON.parse(JSON.stringify(state.tableTitle))
}

const handleFocus = (e:any) => {
  const temp = state.fieldList.find((i:any) => {
    return i.alias === e.target.value
  })
  state.editTemp = temp
}

const handleInput = (value:any) => {
  const tIndex = state.tableTitle.findIndex((i:any) => {
    return state.editTemp.ename === i.ename
  })
  if (tIndex !== -1) {
    state.tableTitle[tIndex].alias = value
  } else {
    const nIndex = state.notSortList.findIndex(i => {
      return state.editTemp.ename === i.ename
    })
    if (nIndex !== -1) {
      state.notSortList[nIndex].alias = value
    }
  }
}

const handleClick = (data:any) => {
  drawList()
  if (state.isDrag) {
    // @ts-ignore
    ElMessageBox.confirm(
      '是否变成当前字段排序，是否继续？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      state.tableTitle = JSON.parse(JSON.stringify(state.colTableTitle))
      commitChange()
      state.isDrag = false
      handleClickInternalMethods(data)
    }).catch(() => {
      state.isDrag = false
      handleClickInternalMethods(data)
    })
  } else {
    handleClickInternalMethods(data)
  }
}
const handleClickInternalMethods = (data:any) => {
  state.tableData = []
  // 切换选项卡
  state.activeName = data.protocol

  // 更新字段数据
  let temp = []
  temp = data.fileds.filter((i:any) => {
    return i.isshow === 1
  })
  state.tableTitle = temp
  state.tableTitle = state.tableTitle.map((i:any) => {
    return {
      ...i,
      width: getColWidth(i.alias)
    }
  })
  state.colTableTitle = JSON.parse(JSON.stringify(state.tableTitle))

  state.notSortList = []
  state.notSortList = data.fileds.filter((i:any) => {
    return i.isshow === 0
  })

  // 更新数据
  state.currentPage = 1
  getprotocol_info()
}
// 根据表格列名宽度计算列宽度
const getColWidth = (label:any) => {
  const text = label
  const font = 'bold 14px Hei' // SiYuan, SimHei, Hei
  const canvas = document.createElement('canvas')
  const context:any = canvas.getContext('2d')
  context.font = font
  const { width } = context.measureText(text)
  return width + 75
}

const openField = (type:any) => {
  const temp = state.protocol_info.find(i => {
    return i.protocol === state.activeName
  })
  state.fieldList = Object.values(temp.fileds)
  state.checkList = []
  state.fieldList.forEach(i => {
    if (i.isshow) {
      state.checkList.push(i.ename)
    }
  })

  if (state.isDrag) {
    state.tableTitle = JSON.parse(JSON.stringify(state.colTableTitle))
  }
  state.notSortList = temp.fileds.filter((i:any) => {
    return i.isshow === 0
  })

  switch (type) {
    case 'sort':
      state.sortDialogVisible = true
      break
    case 'edit':
      state.dialogVisible = true
  }
}

const openJson = (data:any, type:any, title:any) => {}

// 表格中有些字段数据有时是Array，有时是string，需要判断返回合适的内容
const getArrData = (ename:any, data:any) => {
  if (data[ename]) {
    if (typeof data[ename] === 'object' && data[ename].length) {
      return data[ename].join('，')
    } else if (typeof data[ename] === 'object' && !data[ename].length) {
      return '-'
    } else {
      return data[ename]
    }
  } else {
    return '-'
  }
}
const handleTableColData = (filed:any, data:any, info:any) => {
  const basicProps = ['srcip', 'dstip', 'srcport', 'dstport']
  switch (filed.type) {
    case 'Array':
      return getArrData(filed.ename, data)
    case 'json':
      return '预览'
    default:
      if (data[filed.ename] || data[filed.ename] === 0 || data[filed.ename] === false) {
        return data[filed.ename]
      } else if (basicProps.indexOf(filed.ename) !== -1) {
        return info[filed.ename] || '-'
      } else if (filed.ename === 'pacp_source') {
        return info.source
      } else {
        return '-'
      }
  }
}
const getScrollInfo = (data:any) => {
  const temp = data.map((item:any, index:any) => {
    return {
      id: 'unique_' + index,
      title: item
    }
  })
  return temp
}

const getDetailArrData = (data:any) => {
  if (data) {
    if (typeof data === 'object' && data.length) {
      return 'real_array'
    } else if (typeof data === 'object' && !data.length) {
      return false
    } else {
      return 'string'
    }
  } else {
    return false
  }
}
const getDetailsStringData = (data:any, filed:any, info:any) => {
  const basicProps = ['srcip', 'dstip', 'srcport', 'dstport']
  if (data[filed] || data[filed] === 0 || data[filed] === false) {
    return data[filed]
  } else if (basicProps.indexOf(filed) !== -1) {
    return info[filed] || '-'
  } else {
    return '-'
  }
}

const openDetails = (data:any) => {
  const temp = state.protocol_info.find((i:any) => {
    return i.protocol === data.protocol
  })
  state.cnnameList = {}
  temp.fileds.forEach((i:any) => {
    state.cnnameList[i.ename] = {
      label: i.alias,
      type: i.type
    }
  })
  state.detailsInfo = data
  state.detailsVisible = true
}

const gotoFile = (data:any) => {}

const handleCurrentChange = (val:any) => {
  state.currentPage = val
  getprotocol_info()
}

const columnDrop = () => {
  nextTick(() => {
    const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
    if (wrapperTr) {
      Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt:any) => {
          state.isDrag = true
          const oldItem = state.colTableTitle[evt.oldIndex]
          state.colTableTitle.splice(evt.oldIndex, 1)
          state.colTableTitle.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  })
}

const getprotocol_info = () => {
  state.isLoading = true

  const params:any = {
    'filters[protocol][$eq]': state.activeName,
    'pagination[page]': state.currentPage,
    'pagination[pageSize]': 10,
    populate: '*'
  }

  if (state.dateRange && state.dateRange.length === 2) {
    params['filters[createdAt][$between]'] = state.dateRange
  }

  if (state.select && state.input) {
    params[`filters[${state.select}][$contains]`] = state.input
  }

  $ajax.get('flows', params).then(res => {
    nextTick(() => {
      state.isLoading = false
    })
    const { meta, data } = res
    state.total = meta.pagination.total
    const temp = data.map((i:any) => {
      return {
        id: i.id,
        ...i.attributes
      }
    })
    state.tableData = temp
    columnDrop()
  }).catch(() => {
    state.isLoading = false
    ElMessage({
      type: 'error',
      message: '获取数据失败'
    })
  })
}

const getAllProtocol = (isSearchProtocol:any) => {
  let params:any = {}
  if (state.value) {
    params = {
      'pagination[pageSize]': 999,
      'filters[protocol][$contains]': state.value
    }
  } else {
    params = {
      'pagination[pageSize]': 999
    }
  }
  state.isLoading = true
  $ajax.get('uischemas', params).then(res => {
    state.isLoading = false
    const { data } = res

    if (!data || !data.length) {
      state.tableData = []
      state.tableTitle = []
      state.colTableTitle = []
      state.protocol_info = []
      state.activeName = ''
      return
    }

    state.protocol_info = data.map((i:any) => {
      return {
        id: i.id,
        protocol: i.attributes.protocol,
        fileds: i.attributes.fileds
      }
    })

    if (state.activeName && !isSearchProtocol) {
      const temp = state.protocol_info.find(i => {
        return i.protocol === state.activeName
      })
      setProtolLength()
      handleClick(temp)
    } else {
      state.activeName = state.protocol_info[0].protocol
      setProtolLength()
      handleClick(state.protocol_info[0])
    }
  }).catch(() => {
    state.isLoading = false
    ElMessage({
      type: 'error',
      message: '获取数据失败'      
    })
  })
}

const setProtolLength = () => {
  state.protocol_info.forEach((i:any) => {
    $ajax.get('flows', {
      'filters[protocol][$eq]': i.protocol
    }).then(res => {
      i.total = res.meta.pagination.total
    })
  })
}

// 拖拽
const onDrop = (dropResult:any) => {
  console.log(dropResult)
  
  // 排序后的数据
  state.tableTitle = applyDrag(state.tableTitle, dropResult)
  state.colTableTitle = JSON.parse(JSON.stringify(state.tableTitle))
}
const applyDrag = (arr:any, dragResult:any) => {
  const { removedIndex, addedIndex, payload } = dragResult
  if (removedIndex === null && addedIndex === null) return arr
  const result = [...arr]
  let itemToAdd = payload
  if (removedIndex !== null) {
    itemToAdd = result.splice(removedIndex, 1)[0]
  }
  if (addedIndex !== null) {
    result.splice(addedIndex, 0, itemToAdd)
  }
  return result
}

const openSenior = () => {
  state.isShowSenior = !state.isShowSenior
}

const handleClose = (done:any) => {
  done()
}

// 时序图
const drawList = () => {
  if (!isDraw.value) {
    isDraw.value = true
    const dom:any = document.querySelector('#my-list')
    mychart.value = echarts.init(dom)
  }

  listOption.value = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2023-06-27 09:45:02', '2023-06-28 09:45:02', '2023-06-29 09:45:02', '2023-06-30 09:45:02', '2023-07-01 09:45:02', '2023-07-02 09:45:02', '2023-07-03 09:45:02'],
      axisLabel: {
        formatter: function (params:any) {
          const temp = params.split(' ')
          return temp[0] + '\n' + temp[1]
        },
        color: '#747474'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e4e4e4',
          width: 1,
          type: 'deshed'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#747474',
          width: 1
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e4e4e4',
          width: 1,
          type: 'deshed'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#747474',
          width: 1
        }
      },
      axisLabel: {
        color: '#747474'
      }
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '18%',
      top: '10%'
    },
    series: [
      {
        name: '数量',
        type: 'line',
        stack: '总量',
        data: [120, 132, 101, 134, 90, 230, 210],
        symbol: 'none',
        lineStyle: {
          color: '#2593ff'
        }
      }
    ]
  }

  mychart.value.clear()

  unwarp(mychart.value).setOption(listOption.value, true)

  window.addEventListener('resize', () => {
    if (route.name === 'IPMetadata') {
      mychart.value.resize()
    }
  })
}

onMounted(() => {
  getAllProtocol(false)
  drawList()
})
</script>

<style scoped lang="scss">
.IP-metadata {
  position: relative;
  height: 100%;

  .search {
    display: flex;
    margin-bottom: 11px;
    .search-btn {
      margin-left: 10px;
    }
    .box {
      width: 80%;
      max-width: 900px;
      display: flex;
      align-items: center;
      :deep(.el-date-editor) {
        margin-right: 10px;
        min-width: 360px !important;
        max-width:360px !important;
        width: 360px !important;
      }
      :deep(.el-input-group) {
        flex: 1;
      }
      :deep(.el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__wrapper) {
        background-color: #fff;
        width: 80px;
      }
    }
  }

  .senior {
    min-height: 200px;
  }

  .container {
    height: calc(100% - 42px);
    display: flex;
    .l-p {
      width: 250px;
      height: 100%;
      margin-right: 10px;
      border: 1px solid #eaeaeb;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      h2 {
        text-align: center;
        font-size: 16px;
        padding: 12px 0;
        color: #333;
      }
      :deep(.el-select) {
        width: 220px;
        display: block !important;
        margin: 0 auto 10px auto;
        background-color: #f6f7fb;
        .el-input__wrapper {
          background-color: #f6f7fb;
          width: calc(100% - 22px) !important;
        }
        .el-input__inner {
          color: #333;
          font-size: 14px;
          font-weight: 700 !important;
        }
        .el-select__caret {
          font-size: 20px;
          color: #9fa0a4;
        }
      }
      :deep(.el-input) {
        width: 220px;
        margin: 0 auto;
        .el-input__wrapper {
          width: calc(100% - 70px);
        }
      }
      .el-icon-search::before {
        font-size: 18px;
        color: #5c98f3;
        font-weight: 700;
      }
      .menu {
        margin-top: 10px;
        height: calc(100% - 150px);
        overflow-y: auto;
        padding: 0 15px;
        li {
          padding: 8px 14px;
          box-sizing: border-box;
          font-size: 14px;
          color: #333;
          cursor: pointer;
          font-family: Microsoft Yahei !important;
        }
        .iaActive {
          background-color: #edf6ff;
          color: #0960bd !important;
        }
      }
    }
    .r-p {
      width: calc(100% - 260px);
      box-sizing: border-box;
      .t-p {
        border: 1px solid #eaeaeb;
        height: 35%;
        min-height: 224px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        padding: 12px 15px 15px 15px;
        box-sizing: border-box;
        h2 {
          font-size: 16px;
          color: #333;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .list {
          flex: 1;
          #my-list {
            width: 100%;
            height: 100%;
          }
        }
      }
      .b-p {
        height: calc(65% - 10px);
        max-height: calc(100% - 234px);
        border: 1px solid #eaeaeb;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 12px 15px 15px 15px;
        position: relative;
        .el-icon-more {
          position: absolute;
          top: 64px;
          right: 10px;
          z-index: 10;
          transform: rotate(90deg);
          color: #409eff;
          cursor: pointer;
          background-color: #f2f6fc;
          display: inline-block;
          width: 38px;
          text-align-last: center;
        }
        h2 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          font-size: 18px;
        }
        .t-c {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .preview {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
  }

  .wrapper-field {
    display: flex;
    justify-content: center;
    .simple-page {
      // margin-left: 30px;
      // width: 240px;
      width: 270px;
      .draggable-item {
        height: 32px;
        line-height: 32px;
        text-align: center;
        padding: 0 10px;
        background-color: #fff;
        outline: 0;
        border: 1px solid rgba(0, 0, 0, 0.125);
        margin-bottom: 15.55px;
        box-sizing: border-box;
        cursor: default;
        user-select: none;
        color: #666;
      }
      .del {
        color: #999;
        cursor: pointer;
      }
      .noMove {
        background-color: #999;
      }
      .del {
        color: #ccc;
      }
    }
    :deep(.el-checkbox-group) {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 10px 10px;
    }
    .field {
      width: 584px;
    }
  }

  .operate-box {
    display: flex;
    justify-content: center;
    .operate {
      color: #409eff;
      cursor: pointer;
      position: relative;
      top: 3px;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        margin-left: 4px;
      }
    }
    .operate:nth-child(1) {
      margin-right: 10px;
    }
    .no-file {
      cursor: not-allowed !important;
      color: #ccc !important;
    }
  }

  .details {
    li {
      margin-bottom: 10px;
    }
    .details-item {
      margin-bottom: 10px;
    }
    .preview {
      color: #409eff;
      cursor: pointer;
    }
  }

  .field {
    display: flex;
    margin-bottom: 10px;
    justify-content: flex-end;
    .el-checkbox {
      line-height: 32px;
      width: 276px;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 10px;
      border-radius: 4px;
      margin-right: 10px;
    }
    :deep(.el-input) {
      width: 300px;
    }
    :deep(.el-checkbox__label) {
      height: 18px;
      display: inline-block;
      margin-right: 15px;
      position: relative;
      top: 2px;
    }
  }

  .dialog-footer {
    text-align: right;
    margin-top: 10px;
  }

  :deep(.el-drawer__header) {
    margin-bottom: 18px;
  }
  :deep(.el-drawer__header>:first-child) {
    font-weight: bold;
    font-size: 18px;
    color: #333;
  }
  :deep(.el-drawer__body) {
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
  }

  :deep(.el-dialog__body) {
    padding-top: 0;
  }

  :deep(.el-pagination) {
    align-self: end;
    margin-top: 18px;
  }

  :deep(.el-descriptions-item__label.is-bordered-label) {
    white-space: nowrap;
    width: 240px;
  }
  :deep(.el-table__fixed-body-wrapper) {
    top: 41.44px !important;
  }

  :deep(.el-table) {
    display: flex;
    flex-direction: column;
  }
  :deep(.el-table__body-wrapper) {
    flex: 1;
  }
  :deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
    word-break: break-word;
  }
}
</style>